<template>
	<view class="page">
		<view class="title">
			4.2.在组件中通过Props进行数据传递
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/components/props.html" text="Props" color="#007BFF"></uni-link>
		</view>
		<view class="p">
			<UserInfo username="桃乃香奈" avatar="https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/av1.jpg">
			</UserInfo>
			<UserInfo username="鈴乃ウト" avatar="https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/av2.jpg"></UserInfo>
			<UserInfo :username="name" avatar="https://env-00jxt1ebvd3g.normal.cloudstatic.cn/uniapp/av3.jpg">
			</UserInfo>
		</view>
		<view class="p">
			子组件声明需要传递的数据名称。defineProps(['username', 'avatar']),父组件可以直接赋值，或者以对象形式赋值。 详情看代码
		</view>
		<view class="p">
			声明传递的数据并不一定要在子组件内调用，也可以是计算后的属性。
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const name = ref("三上悠亜");
</script>

<style lang="scss" scoped>
	.p .box {
		margin-bottom: 24rpx;
	}
</style>